<template>
  <x-breadcrumb :content-list="contentList"></x-breadcrumb> <!-- 面包屑导航 -->

  <el-card class="box-card mt-3">
    <el-row class="mt-2">
      <el-col :span="8">
        <x-search-input v-model="searchInputValueAndClick.inputValue" :input-blur-event="searchInputValueAndClick.blurValueEvent" :find-btn-click="searchInputValueAndClick.searchClick"></x-search-input>
      </el-col>
    </el-row>

    <el-table
      :data="ordersObj.orders"
      stripe border
      :cell-style="{ textAlign: 'center' }"
      class="my-4"
      :header-cell-style="{ textAlign: 'center' }"
    >
      <el-table-column label="#" type="index"></el-table-column>
      <el-table-column prop="order_number" label="订单编号"></el-table-column>
      <el-table-column prop="order_price" label="订单价格"></el-table-column>
      <el-table-column prop="order_pay" label="是否付款">
        <template #default="scope">
          <el-tag type="danger" v-if="scope.row.pay_status === '1'">未支付</el-tag>
          <el-tag type="success" v-else>已付款</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="is_send" label="是否发货"></el-table-column>
      <el-table-column prop="create_time" label="下单时间" :formatter="dateFormat"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="medium" type="primary" icon="el-icon-edit" @click="btnObj.showBox(scope.row)"></el-button>
          <el-button size="medium" type="success" icon="el-icon-location" @click="btnObj.showProgressBox"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <x-pagination :total="ordersObj.total ? ordersObj.total : 0" :dispatch-name="'getOrdersList'"></x-pagination>
  </el-card>

  <el-dialog
    title="修改订单"
    v-model="changeOrdersObj.dialogVisible"
    width="50%"
    :before-close="changeOrdersObj.handleClose"
  >
    <el-form :model="changeOrdersFormData" ref="changeOrdersFormDom" :rules="rules">
      <el-form-item label="是否付款">
        <el-switch
          v-model="changeOrdersFormData.changeIsPayment"
          active-color="#13ce66"
          active-value="0"
          inactive-value="1"
        >
        </el-switch>
      </el-form-item>
      <el-form-item label="是否发货">
        <el-switch
          v-model="changeOrdersFormData.changeIsSwitch"
          active-color="#13ce66"
          active-value="是"
          inactive-value="否"
        >
        </el-switch>
      </el-form-item>
      <el-form-item label="支付方式">
        <el-select v-model="changeOrdersFormData.changeSelectValue" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="订单价格" prop="changeOrdersPriceVal">
        <el-input v-model="changeOrdersFormData.changeOrdersPriceVal"></el-input>
      </el-form-item>
      <el-form-item label="订单编号" prop="changeOrdersNumVal">
        <el-input v-model="changeOrdersFormData.changeOrdersNumVal"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="changeOrdersObj.dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="changeOrdersObj.changeFormSubmitClick">确 定</el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 展示物流进度的对话框 -->
  <el-dialog title="物流进度" v-model="progressObj.progressVisible" width="50%">
    <!-- 时间线 -->
    <el-timeline>
      <el-timeline-item v-for="(activity, index) in progressObj.progressInfo" :key="index" :timestamp="activity.time">
        {{activity.context}}
      </el-timeline-item>
    </el-timeline>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="progressObj.progressVisible = false">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { defineComponent, computed, onMounted } from 'vue'
import { useStore } from '@/store'
import { ordersObjType } from '@/store/storeType'
import { pageData, searchInputValueAndClick, btnsEvntsFn, changeOrdersFormData, progressObj, changeOrdersFn } from './odersEventsAndState'
import XBreadcrumb, { contentType } from '@/components/public-components/XBreadcrumb.vue'
import XPagination from '@/components/public-components/XPagination.vue'
import XSearchInput from '@/components/public-components/XSearchInput.vue'
import { dateFormat } from '@/utils/NewDate'
import { rules, options } from './ordersParams'

const contentList: contentType[] = ['首页', '订单管理', '订单列表']

export default defineComponent({
  name: 'HomeOrders',
  components: {
    XBreadcrumb,
    XSearchInput,
    XPagination
  },
  setup () {
    const store = useStore()
    onMounted(() => {
      store.dispatch('getOrdersList', pageData)
    })
    const ordersObj = computed<ordersObjType>(() => store.state.ordersModule.ordersObj)
    
    const { changeOrdersObj } = changeOrdersFn()

    const { btnObj } = btnsEvntsFn(changeOrdersObj)


    return { searchInputValueAndClick, ordersObj, btnObj, changeOrdersObj, rules, changeOrdersFormData, options, progressObj, dateFormat, contentList }
  }
})
</script>
